<script setup>
import { ref, reactive } from "vue";
import inputVue from "@/components/base/input.vue";
import addMessage from '@/hooks/message.js'
import { login } from "@/utils/user";
import { useRouter } from "vue-router";
import { useUserStore } from '@/stores/user'
const router = useRouter();
const userStore = useUserStore()

let inputData = reactive({
    username: '19102948',
    password: 'password',
})

async function confirmInput() {
    let res = await login(inputData);
    if (res.code == 0) {
        userStore.setUser(res.data.user);
        //设置token
        localStorage.setItem('token',res.data.token);
        addMessage('登录成功');
        router.push('/home')
        return;
    }
    addMessage(res.message,'登录失败',0);
}
</script>

<template>
    <body>
        <span class="box">
            <h1>登录</h1>
            <inputVue v-model="inputData.username" placeholder="账户"></inputVue>
            <inputVue v-model="inputData.password" placeholder="密码" type="password"></inputVue>
            <button @click="confirmInput">登录</button>
        </span>
    </body>
</template>

<style scoped>
.box {
    padding: 1em;
    height: max(100px,30vh);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}
</style>